import { css } from '@emotion/react'
import { Fragment, useMemo } from 'react'
import Emoji, { emojiMap } from '@/desktop/components/Emoji'

export function EmojiTable() {
  const lines = useMemo(() => {
    const emojis = [...emojiMap]
    const lines: { id: string; text: string }[][] = []
    for (const emoji of emojis) {
      if (!lines.length || lines[lines.length - 1]!.length === 5) {
        lines.push([])
      }
      const line = lines[lines.length - 1]!
      line.push({ id: emoji[1], text: emoji[0] })
    }

    return lines
  }, [])

  return <div css={s.wrap}>
    <table css={s.table}>
      <thead>
        <tr>
          <th>表情</th>
          <th>文本</th>
          <th>表情</th>
          <th>文本</th>
          <th>表情</th>
          <th>文本</th>
          <th>表情</th>
          <th>文本</th>
          <th>表情</th>
          <th>文本</th>
        </tr>
      </thead>
      <tbody>
        {lines.map((line, index) => {
          return <tr key={index}>
            {line.map(emoji => {
              return <Fragment key={emoji.id}>
                <td>
                  <Emoji code={emoji.text} />
                </td>
                <td>{emoji.text}</td>
              </Fragment>
            })}
          </tr>
        })}
      </tbody>
    </table>
  </div>
}

const s = {
  wrap: css`
    background-color: #fff;
  `,
  table: css`
    th,
    td {
      border: 1px solid #ccc;
      padding: 6px 12px;
      text-align: left;
    }
  `,
}
